<template>
  <div>
<el-card class="box-card" >
  <div slot="header" style="color:blue"  class="clearfix">
    <span style="float:left">考勤申请</span>
  </div>
   <el-tabs v-model="activeName">
     <!-- 请假申请单---------------------------------------------------------------------------------------------------- -->
    <el-tab-pane label="请假" name="1">
      <el-row>
      <el-col :pull="8">
    <el-form ref="form"   :model="oneForm" label-width="50%">
       <el-form-item >
    请假申请单
  </el-form-item>
   <el-form-item label="请假事由">
     <el-radio v-model="oneForm.apply_reason" label="年假">年假</el-radio>
     <el-radio v-model="oneForm.apply_reason" label="事假">事假</el-radio>
     <el-radio v-model="oneForm.apply_reason" label="病假">病假</el-radio>
     <el-radio v-model="oneForm.apply_reason" label="婚假">婚假</el-radio>
     <el-radio v-model="oneForm.apply_reason" label="产/陪产假">产/陪产假</el-radio>
     <el-radio v-model="oneForm.apply_reason" label="丧假">丧假</el-radio>
  </el-form-item>
  <el-form-item label="请假时间">
   <el-date-picker
      v-model="oneForm.create_time"
      type="datetime"
      placeholder="选择开始时间"
      align="right"
      @change="onedate()"
      >
    </el-date-picker>
至
    <el-date-picker
      v-model="oneForm.end_time"
      type="datetime"
      placeholder="选择结束时间"
      align="right"
        @change="onedate()"
    >
    </el-date-picker>
  </el-form-item>
  <el-form-item label="考勤统计">
<el-input  v-model="oneForm.attendance_statistics"  style="width: 25%" disabled ></el-input>小时
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="oneForm.note_information"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="AskLeavePoAdd" >申请</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
      </el-col>
      </el-row>
    </el-tab-pane>
    <!-- 出差----------------------------------------------------------------------------------------------------------------- -->
    <el-tab-pane label="出差" name="2">
       <el-row>
      <el-col :pull="8">
    <el-form ref="form"   :model="twoForm" label-width="50%">
       <el-form-item >
    差旅通知单
  </el-form-item>
   <el-form-item label="项目名称">
     <el-input v-model="twoForm.apply_reason"></el-input>
  </el-form-item>
  <el-form-item label="出差地点">
     <el-input v-model="twoForm.travel_name"></el-input>
  </el-form-item>
  <el-form-item label="出差时间">
   <el-date-picker
      v-model="twoForm.create_time"
      type="datetime"
      placeholder="选择开始时间"
      align="right"
      @change="twodate()"
      >
    </el-date-picker>
至
    <el-date-picker
      v-model="twoForm.end_time"
      type="datetime"
      placeholder="选择结束时间"
      align="right"
        @change="twodate()"
    >
    </el-date-picker>
    <el-input  v-model="twoForm.attendance_statistics"  style="width: 15%" disabled ></el-input>小时
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="twoForm.note_information"></el-input>
  </el-form-item>
     <el-form-item label="公里数">
        <el-input-number v-model="twoForm.drive_mileage" :min="0" ></el-input-number><span style="color:red">(自驾超过35公里予以补贴)</span>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="BusinessTravelRequestPoAdd" >申请</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
      </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="外勤" name="3">
          <el-row>
      <el-col :pull="8">
        <!-- 外勤---------------------------------------------------------------------------------------------------- -->
    <el-form ref="form"   :model="threeForm" label-width="50%">
       <el-form-item >
   外勤申请单
  </el-form-item>
   <el-form-item label="项目名称/事由">
     <el-input v-model="threeForm.apply_reason"></el-input>
  </el-form-item>
  <el-form-item label="地点">
     <el-input v-model="threeForm.place_name"></el-input>
  </el-form-item>
  <el-form-item label="出差时间">
   <el-date-picker
      v-model="threeForm.create_time"
      type="datetime"
      placeholder="选择开始时间"
      align="right"
      @change="threedate()"
      >
    </el-date-picker>
至
    <el-date-picker
      v-model="threeForm.end_time"
      type="datetime"
      placeholder="选择结束时间"
      align="right"
        @change="threedate()"
    >
    </el-date-picker>
    <el-input  v-model="threeForm.attendance_statistics"  style="width: 15%" disabled ></el-input>小时
  </el-form-item>
       <el-form-item label="公里数">
        <el-input-number v-model="threeForm.drive_mileage" :min="0" ></el-input-number><span style="color:red">(自驾超过35公里予以补贴)</span>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="FieldApplicationPoAdd" >申请</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
      </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="未打卡" name="4">
            <el-row>
      <el-col :pull="8">
        <!-- 未打卡---------------------------------------------------------------------------------------------- -->
    <el-form ref="form"   :model="fourForm" label-width="50%">
       <el-form-item >
   未打卡申请单
  </el-form-item>
  <el-form-item label="申清时间">
   <el-date-picker
      v-model="fourForm.create_time"
      type="datetime"
      placeholder="选择开始时间"
      align="right"
      @change="fourdate()"
      >
    </el-date-picker>
至
    <el-date-picker
      v-model="fourForm.end_time"
      type="datetime"
      placeholder="选择结束时间"
      align="right"
        @change="fourdate()"
    >
    </el-date-picker>
    <el-input  v-model="fourForm.attendance_statistics"  style="width: 15%" disabled ></el-input>小时
  </el-form-item>
    <el-form-item label="备注">
    <el-input type="textarea" v-model="fourForm.note_information"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="NotClockPoAdd" >申请</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
      </el-col>
      </el-row>
    </el-tab-pane>
    <!-- 公司活动--------------------------------------------------------------------------------------------------- -->
    <el-tab-pane label="公司活动" name="5">
         <el-row>
      <el-col :pull="8">
    <el-form ref="form"   :model="fiveForm" label-width="50%">
       <el-form-item >
    公司活动申请单
  </el-form-item>
   <el-form-item label="活动事由">
     <el-radio v-model="fiveForm.apply_reason" label="考察游">考察游</el-radio>
     <el-radio v-model="fiveForm.apply_reason" label="大游">大游</el-radio>
     <el-radio v-model="fiveForm.apply_reason" label="小游">小游</el-radio>
     <el-radio v-model="fiveForm.apply_reason" label="年会">婚年会假</el-radio>
     <el-radio v-model="fiveForm.apply_reason" label="其他">其他</el-radio>
  </el-form-item>
  <el-form-item label="申请时间">
   <el-date-picker
      v-model="fiveForm.create_time"
      type="datetime"
      placeholder="选择开始时间"
      align="right"
      @change="fivedate()"
      >
    </el-date-picker>
至
    <el-date-picker
      v-model="fiveForm.end_time"
      type="datetime"
      placeholder="选择结束时间"
      align="right"
        @change="fivedate()"
    >
    </el-date-picker>
  </el-form-item>
  <el-form-item label="考勤统计">
<el-input  v-model="fiveForm.attendance_statistics"  style="width: 25%" disabled ></el-input>小时
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="fiveForm.note_information"></el-input>
  </el-form-item>
        <el-form-item label="公里数">
        <el-input-number v-model="fiveForm.drive_mileage" :min="0" ></el-input-number><span style="color:red">(自驾超过35公里予以补贴)</span>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="CompanyActivitiesPoAdd" >申请</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
      </el-col>
      </el-row>
    </el-tab-pane>
    <!-- 部门活动---------------------------------------------------------------------------------------- -->
    <el-tab-pane label="部门活动" name="6">

            <el-row>
      <el-col :pull="8">
    <el-form ref="form"   :model="sixForm" label-width="50%">
       <el-form-item >
    部门活动申请单
  </el-form-item>
   <el-form-item label="活动事由">
     <el-radio v-model="sixForm.apply_reason" label="组织活动">组织活动</el-radio>
     <el-radio v-model="sixForm.apply_reason" label="聚餐">聚餐</el-radio>
     <el-radio v-model="sixForm.apply_reason" label="其他">其他</el-radio>
  </el-form-item>
  <el-form-item label="申请时间">
   <el-date-picker
      v-model="sixForm.create_time"
      type="datetime"
      placeholder="选择开始时间"
      align="right"
      @change="sixdate()"
      >
    </el-date-picker>
至
    <el-date-picker
      v-model="sixForm.end_time"
      type="datetime"
      placeholder="选择结束时间"
      align="right"
        @change="sixdate()"
    >
    </el-date-picker>
  </el-form-item>
  <el-form-item label="考勤统计">
<el-input  v-model="sixForm.attendance_statistics"  style="width: 25%" disabled ></el-input>小时
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="sixForm.note_information"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="DepartmentActivityPoAdd" >申请</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
      </el-col>
      </el-row>
    </el-tab-pane>
    <!-- 加班离岗 -->
    <el-tab-pane label="加班离岗" name="7"> 
            <el-row>
      <el-col :pull="8">
    <el-form ref="form"   :model="sevenForm" label-width="50%">
       <el-form-item >
    加班离岗申请单
  </el-form-item>
   <el-form-item label="活动事由">
     <el-radio v-model="sevenForm.apply_reason" label="加班时中途外出">加班时中途外出</el-radio>
     <el-radio v-model="sevenForm.apply_reason" label="参加活动">参加活动</el-radio>
  </el-form-item>
  <el-form-item label="申请时间">
   <el-date-picker
      v-model="sevenForm.create_time"
      type="datetime"
      placeholder="选择开始时间"
      align="right"
      @change="sevendate()"
      >
    </el-date-picker>
至
    <el-date-picker
      v-model="sevenForm.end_time"
      type="datetime"
      placeholder="选择结束时间"
      align="right"
        @change="sevendate()"
    >
    </el-date-picker>
  </el-form-item>
  <el-form-item label="考勤统计">
<el-input  v-model="sevenForm.attendance_statistics"  style="width: 25%" disabled ></el-input>小时
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="sevenForm.note_information"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="success" @click="WorkOvertimeLeaveAdd" >申请</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
      </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
  <div>


  </div>
</el-card>

  </div>
</template>

<script>
import {
AskLeavePoAdd,
BusinessTravelRequestPoAdd,
FieldApplicationPoAdd,
NotClockPoAdd,
CompanyActivitiesPoAdd,
DepartmentActivityPoAdd,
WorkOvertimeLeaveAdd
} from "./AttendanceManagementApi";
  export default {
    data() {
      return { 
        activeName:"1",
        oneForm: {
          apply_reason:null,
          create_time: null,
          end_time: null,
          attendance_statistics: 0,
          note_information: null,       
        },
          twoForm: {
            apply_reason:null,
            travel_name:null,
          create_time: null,
          end_time: null,
          attendance_statistics: 0,
          note_information: null, 
          drive_mileage:0,      
        },
         threeForm: {
            reason_name:null,
            place_name:null,
          create_time: null,
          end_time: null,
          attendance_statistics: 0,
          drive_mileage:0,      
        },
         fourForm: {
          create_time: null,
          end_time: null,
          attendance_statistics: 0,
          note_information:null,      
        },
         fiveForm: {
          apply_reason:null,
           create_time: null,
          end_time: null,
          attendance_statistics: 0,
          note_information: null, 
           drive_mileage:0,        
        },
         sixForm: {
          apply_reason:null,
           create_time: null,
          end_time: null,
          attendance_statistics: 0,
          note_information: null,       
        },
         sevenForm: {
          apply_reason:null,
           create_time: null,
          end_time: null,
          attendance_statistics: 0,
          note_information: null,       
        },


      }
    },
    methods: {
      //结算两个时间差的方法
     datediff(createtime,endtime){
       var a=endtime-createtime;
       console.log(createtime,endtime)
       if(createtime==null||endtime==null){       
         return;
       }
       if(a<0){
         alert("结束时间不能小于开始时间")
          this.oneForm.attendance_statistics=0;
         return;
       }
       var b=a/1000;
       var c=b/3600;
       return c;
     },
     //请假时间赋值
     onedate(){
        this.oneForm.attendance_statistics=this.datediff(this.oneForm.create_time,this.oneForm.end_time)
     },
     //出差时间赋值
      twodate(){
        this.twoForm.attendance_statistics=this.datediff(this.twoForm.create_time,this.twoForm.end_time)
     },
     //外勤时间赋值
      threedate(){
        this.threeForm.attendance_statistics=this.datediff(this.threeForm.create_time,this.threeForm.end_time)
     },
       //未打卡时间赋值
      fourdate(){
        this.fourForm.attendance_statistics=this.datediff(this.fourForm.create_time,this.fourForm.end_time)
     },
      //公司活动时间赋值
      fivedate(){
        this.fiveForm.attendance_statistics=this.datediff(this.fiveForm.create_time,this.fiveForm.end_time)
     },
      //部门活动时间赋值
      sixdate(){
        this.sixForm.attendance_statistics=this.datediff(this.sixForm.create_time,this.sixForm.end_time)
     },
      //加班离岗时间赋值
      sevendate(){
        this.sevenForm.attendance_statistics=this.datediff(this.sevenForm.create_time,this.sevenForm.end_time)
     },
     AskLeavePoAdd(){
       if(this.oneForm.attendance_statistics==0||this.oneForm.attendance_statistics==null){
         alert("不能请假0小时");
         return ;
       }
       AskLeavePoAdd(this.oneForm).then((res)=>{
         if(res.data>0){
           alert("申请发送成功");
           this.$router.go("/attendance_apply");
         }
       })
     },
     BusinessTravelRequestPoAdd(){
        if(this.twoForm.attendance_statistics==0||this.twoForm.attendance_statistics==null){
         alert("不能请假0小时");
         return ;
       }
       console.log(this.twoForm)
       BusinessTravelRequestPoAdd(this.twoForm).then((res)=>{
         if(res.data>0){
           alert("申请发送成功");
            this.$router.go("/attendance_apply");
         }
       })
     },
       FieldApplicationPoAdd(){
       if(this.threeForm.attendance_statistics==0||this.threeForm.attendance_statistics==null){
         alert("不能请假0小时");
         return ;
       }
       FieldApplicationPoAdd(this.threeForm).then((res)=>{
         if(res.data>0){
           alert("申请发送成功");
           // this.$router.push("/attendance_apply");
           this.$router.go("/attendance_apply");
         }
       })
     },
      NotClockPoAdd(){
       if(this.fourForm.attendance_statistics==0||this.fourForm.attendance_statistics==null){
         alert("不能请假0小时");
         return ;
       }
       NotClockPoAdd(this.fourForm).then((res)=>{
         if(res.data>0){
           alert("申请发送成功");
           // this.$router.push("/attendance_apply");
           this.$router.go("/attendance_apply");
         }
       })
     },
     CompanyActivitiesPoAdd(){
       if(this.fiveForm.attendance_statistics==0||this.fiveForm.attendance_statistics==null){
         alert("不能请假0小时");
         return ;
       }
       CompanyActivitiesPoAdd(this.fiveForm).then((res)=>{
         if(res.data>0){
           alert("申请发送成功");
           // this.$router.push("/attendance_apply");
           this.$router.go("/attendance_apply");
         }
       })
     },
       DepartmentActivityPoAdd(){
       if(this.sixForm.attendance_statistics==0||this.sixForm.attendance_statistics==null){
         alert("不能请假0小时");
         return ;
       }
       DepartmentActivityPoAdd(this.sixForm).then((res)=>{
         if(res.data>0){
           alert("申请发送成功");
           // this.$router.push("/attendance_apply");
           this.$router.go("/attendance_apply");
         }
       })
     },
      WorkOvertimeLeaveAdd(){
       if(this.sevenForm.attendance_statistics==0||this.sevenForm.attendance_statistics==null){
         alert("不能请假0小时");
         return ;
       }
       WorkOvertimeLeaveAdd(this.sevenForm).then((res)=>{
         if(res.data>0){
           alert("申请发送成功");
           // this.$router.push("/attendance_apply");
           this.$router.go("/attendance_apply");
         }
       })
     },
    }
  }  
</script>


 